import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber,Table,TreeSelect,Select,Button,Row,Col, } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

class SecondDistributionModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedRows:[],
    };
  }

  // 点击保存将state里的选中的值放到回显给父级页面上
  okHandler = () => {
    const { onOk } = this.props; 
    onOk(this.state.selectedRows);

  };

// 将选中的数据放在state里
  onSelectChange = (selectedRowKeys, selectedRows) => {
       this.setState({
           selectedRows : selectedRows,
      })
  };

  handleClearForm = () => {
      this.props.form.resetFields();
  }

  render() {
    const { children,dispatch,assetType, title,detailList,roomList,typeId,assetList,assetBrandList, assetCurrent,assetCurrentSize,assetTotal} = this.props;    
    const { getFieldDecorator,getFieldsValue} = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };

    // 搜索资产列表
    const searchHandle = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          dispatch({
            type: 'distribution/querAssetListByParam',
            payload: {...values,...{typeId:typeId}},
        });
         }
       });
     }

    const paginationDetail = {
      current: assetCurrent,
      pageSize: assetCurrentSize,
      total: assetTotal,
      showSizeChanger: true,
      showTotal: (total => '共' + assetTotal + '条'),
      onShowSizeChange(current, size) {
        dispatch({
          type: 'distribution/querAssetListByParam',
          payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size,...{typeId:typeId} } },
        });
      },
      onChange(current) {
        dispatch({
          type: 'distribution/querAssetListByParam',
          payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': assetCurrentSize,...{typeId:typeId} } },
        });
      },
    };

    const loop = data => data.map((item) => {
      if (item.assetType && item.assetType.length) {
        return <TreeNode key={item.id_+''} title={item.name} value={item.id_+''}>{loop(item.assetType)}</TreeNode>;
      }
      return <TreeNode key={item.id_+''} title={item.name} value={item.id_+''} />;
    });
    const loopRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });
    const getBrand = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.name}</Option>
    })

    const rowSelection = {
      onChange: this.onSelectChange.bind(this),
      type:"radio",
    };
    const columns = [{
        fixed: 'left',
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 150
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 120
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 150
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 120,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 150,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        render: (value, row, index) => {
          return (
            value == 1 ? "在库" : value == 2 ? "已上架" : value == 3 ? "已报废" :value == 4 ? "已出库" :''
          )
        }
      },{
        title: '所在位置',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 60,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 120,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
      }];  
    return (
        <span>
          
            <Modal              
                confirmLoading={false}
                title={this.props.title}
                width={1000}
                zIndex={200}
                visible={this.props.visible}
                onOk={this.okHandler.bind(this)}
                onCancel={this.props.onCancel}

             >
        <div style={{width:'auto',height:document.body.clientHeight - 250,position:'relative',backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff', paddingLeft:'20px',marginTop:'-16px'}}>
                <Form layout={'inline'} style={{marginTop: '0px'}}>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('searchStatusType',{initialValue:1})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('detailList',{initialValue:detailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                  
                     <Row gutter={16}>
                      <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                              label="所在位置"
                              hasFeedback
                            >
                            {
                            getFieldDecorator('roomId')(
                              <Select
                                allowClear
                                style={{ width: '200px' }}                       
                                placeholder="请选择位置"
                              >
                                {loopRoom(roomList)}
                              </Select>
                            )
                          }
                       </FormItem>  
                      </Col>
                      <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="品牌"
                            hasFeedback
                          >
                          {getFieldDecorator('brandId')(
                          <Select 
                            showSearch
                            allowClear
                            style={{ width: '200px' }}
                            placeholder="请选择品牌">
                            {getBrand(assetBrandList)}
                          </Select>
                          )}
                        </FormItem> 
                      </Col>

                      <Col span={8}>
                          <FormItem
                            {...formItemLayout}
                            label="设备名称"
                            hasFeedback
                          >
                          {
                            getFieldDecorator('assetName')(<Input  style={{ width: '200px' }}/>)
                          }
                        </FormItem> 
                      </Col>
                      
                    </Row>

                    <Row style={{marginTop:'20px'}}>
                      <Col span={8}>
                          <FormItem
                            {...formItemLayout}
                            label="序列号"
                            hasFeedback
                          >
                          {
                            getFieldDecorator('serialNo')(<Input  style={{ width: '200px' }}/>)
                          }
                        </FormItem> 
                       
                     </Col>
                     <Col span={8}>
                       <FormItem
                            {...formItemLayout}
                            label="RFID号"
                            hasFeedback
                          >
                          {
                            getFieldDecorator('rfidNo')(<Input  style={{ width: '200px' }}/>)
                          }
                        </FormItem> 
                     </Col>
                     <Col span={8}>
                        <div style={{textAlign: 'right' ,paddingRight:'20px'}}>
                            <Button size="large" style={{ marginRight: '10px' }} onClick={searchHandle} type="primary" className='ant-search-btn'>搜索</Button>
                            <Button size="large" htmlType="reset" onClick={this.handleClearForm}>清空</Button>
                        </div>
                     </Col>
                    </Row>      
                </Form>    
              </div>     
              <div style={{minHeight:'100%'}}>
                    <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'10px',paddingRight:'20px'}}>
                        <Table columns={columns}
                            rowSelection={rowSelection}
                            rowKey={record => record.id_}                  
                            dataSource={assetList} 
                            pagination={paginationDetail} 
                            scroll={{ y: document.body.clientHeight - 430,x: 1820 }}
                        />
                     </div>
            </div>
            </div>          
        </div>
        </Modal>
        </span>
    );
  }
}

export default Form.create()(SecondDistributionModal);